<script setup>
import { ref, onMounted } from 'vue'
import { updateUserInfoAPI } from '@/apis/user'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()
const infoForm = ref({
    address: '',
    email: '',
    identityNum: '',
    realName: ''
})

const check = () => {
    const info = infoForm.value
    if (info.address !== '' && info.email !== '' && info.identityNum !== '' && info.realName !== '') {
        return true
    }
    return false
}

const updateUserInfo = async () => {
    if (!check()) {
        ElMessage({ type: 'error', message: '请完整填写信息' })
        return
    }
    const res = await updateUserInfoAPI({ ...infoForm.value })
    if (res.code === 2000) {
        userStore.getUserInfo()
        ElMessage({ type: 'success', message: '信息修改成功' })
    }
}

onMounted(() => {
    infoForm.value.address = userStore.userInfo.address
    infoForm.value.email = userStore.userInfo.email
    infoForm.value.identityNum = userStore.userInfo.identityNum
    infoForm.value.realName = userStore.userInfo.realName
})
</script>

<template>
<div class="userInfo-page">
    <div class="page-title">我的信息</div>
    <div class="userInfo-form">
        <div class="u-form-item">
            <div class="label">头像：</div>
            <img src="@/assets/img/avatar-default.png" alt="">
        </div>
        <div class="u-form-item">
            <div class="label">用户名：</div>
            <div class="ipt"><input type="text" :value="userStore.userInfo?.username" disabled="disabled"></div>
        </div>
        <div class="u-form-item">
            <div class="label">电话：</div>
            <div class="ipt"><input type="text" :value="userStore.userInfo?.phone" disabled="disabled"></div>
        </div>
        <div class="u-form-item">
            <div class="label">邮箱：</div>
            <div class="ipt"><input type="text" v-model="infoForm.email"></div>
        </div>
        <div class="u-form-item">
            <div class="label">地址：</div>
            <div class="ipt"><input type="text" v-model="infoForm.address"></div>
        </div>
        <div class="u-form-item">
            <div class="label">姓名：</div>
            <div class="ipt"><input type="text" v-model="infoForm.realName"></div>
        </div>
        <div class="u-form-item">
            <div class="label">身份证号：</div>
            <div class="ipt"><input type="text" v-model="infoForm.identityNum"></div>
        </div>
    </div>
    <a href="javascript:;" class="alter-btn" @click="updateUserInfo">修 改</a>
</div>
</template>

<style scoped lang='scss'>
.userInfo-page {
    width: 100%;
    height: 100%;
    padding: 20px 40px;
    background-color: #fff;
}

.page-title {
    font-size: 21px;
    padding: 15px 0;
    border-bottom: 1px solid #e8e8e8;
}

.userInfo-form {
    margin-top: 30px;

    .u-form-item {
        display: flex;
        margin-bottom: 30px;

        img {
            $imgSize: 100px;
            width: $imgSize;
            height: $imgSize;
            border-radius: $imgSize;
        }

        .label {
            width: 90px;
            color: #666;
            font-weight: bold;
        }

        .ipt {
            width: 300px;
            height: 35px;
            border: 1.5px solid #d8d8d8;
            border-radius: 5px;

            input {
                width: 100%;
                height: 100%;
                font-size: 16px;
                padding: 0 10px;
                border-radius: 5px;
            }
        }
    }
}

.alter-btn {
    display: block;
    width: 100px;
    height: 35px;
    line-height: 35px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    background-color: #39bf3e;
    text-align: center;
    margin-left: 90px;
}
</style>
